<template>
	<view>
		<view class="content">
			<image src="../../static/logo.png" style="margin-left:20rpx;width: 100rpx;border-radius: 100rpx;"
				mode="widthFix"></image>
			<view class="user-info">
				<view>小白</view>
				<view style="font-size: 26rpx;margin-top: 10rpx;">什么东西</view>
			</view>
			<view style="margin-right: 50rpx;">
				<u-icon name="setting" size="24" color="white"></u-icon>
			</view>
		</view>
		<u-gap height="10" bgColor="#f4f4f5"></u-gap>
		<list-title name="我的订单"></list-title>
		<view class="order">
			<u-grid :border="false" col=5>
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<u-icon color="#90918D" :customStyle="{paddingTop:10+'rpx'}" :name="baseListItem.name" :size="28"></u-icon>
					<text class="grid-text" style="color: #90918D;">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<u-gap height="10" bgColor="#f4f4f5"></u-gap>
		<list-title name="我的资产"></list-title>
		<view class="order">
			<u-grid :border="false" col=4>
				<u-grid-item v-for="(item,index) in userInfo" :key="index">
					<text class="grid-text" style="color: #90918D;">{{item.num}}</text>
					<text class="grid-text" style="color: #90918D;">{{item.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<u-gap height="10" bgColor="#f4f4f5"></u-gap>
	</view>
</template>

<script>
	import listTitle from "../../components/list-title/list-title.vue"
	export default {
		components: {
			listTitle
		},
		data() {
			return {
				baseList: [{
						name: 'order',
						title: '订单'
					},
					{
						name: 'rmb-circle',
						title: '待支付'
					},
					{
						name: 'bag',
						title: '待使用'
					},{
						name: 'chat',
						title: '评价'
					},
					{
						name: 'reload',
						title: '退款'
					}
				],
				userInfo:[
					{
						num:0,
						title:"积分"
					},{
						num:0,
						title:"优惠券"
					},{
						num:0,
						title:"收藏"
					},{
						num:0,
						title:"活动"
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		justify-items: center;
		background: linear-gradient(to right, #a0cfff 0%,#78DFEB 50%,#09B7EB 100%);

		.user-info {
			margin-left: 20rpx;
			flex: 1;
			color: white;
			text-align: left;
		}
	}
	.order{
		padding: 20rpx 0;
	}
	
</style>
